<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		#body{
			margin: auto;
			height: 600px;
			border: 1px solid white;
			background-image: url(../../img/reg-mobile.jpg);
		}	
		#d_form{
			border: 1px solid black;
			background-color: white;
			width: 75%;
			margin: auto;
			margin-top: 50px;
			height: 400px;
			
		}
		#d_left{
			margin-top: 35px;
		}
		
		#f_register input[type=text]{
			width: 270px;
			height: 35px;
			border: 1px solid gray;
			/*首行缩进40px*/
			text-indent: 40px;				
			font-size: 14px;					
		}
		
		
		#f_register p{
			margin-top: 15px;
			margin-left: 30px;
		}
		#bg_email{
			background-image: url(../../img/login-input5.png);
			background-repeat: no-repeat;
			background-position-x:10px ;
			background-position-y:10px ;
		}
		#bg_name{
			background-image: url(../../img/login-input1.png);
			background-repeat: no-repeat;
			background-position-x:10px ;
			background-position-y:10px ;
		}
		#bg_pwd,#bg_rpwd{
			background-image: url(../../img/login-input2.png);
			background-repeat: no-repeat;
			background-position-x:10px ;
			background-position-y:10px ;
		}
		#bg_checked{
			background-image: url(../../img/login-input3.png);
			background-repeat: no-repeat;
			background-position-x:10px ;
			background-position-y:10px ;
		}
		#img_checked{
			vertical-align: middle;
		}
		#l_agree{
			font-size: 12px;			
		}
		#f_register input[type=checkbox]{
			vertical-align: middle;
		}
		#l_agree a{
			color: deepskyblue;
		}
		#btn_register{
			width: 200px;
			height: 40px;
			background-color:#55abe8;
			border-radius: 5px;
			color: #fff;
		}
		#btn_b{
			
			width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
            margin-top: 100px;
            margin-left: 30px;
           /* display: block;*/
            color: #fff;
            background-color:#55abe8;
		}
		#d_left{
			float: left;
		}
		#d_right{	
			width:259px;		
			height: 399px;
		    float: right;
		    border-left:1px dashed #000;
		}
		span{
			color: red;
			font-size: 12px;
		}
		</style>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
		<script>
			$(function(){
			$("#f_register").submit(function(){
		    var aa=checkMail()&checkName()&checkPwd()&checkRpwd()&checkChecked();
		    return aa>0;
		    });
				
		    $("#bg_email").blur(checkMail);
		    $("#bg_name").blur(checkName);
		    $("#bg_pwd").blur(checkPwd);
		    $("#bg_rpwd").blur(checkRpwd);
		    $("#bg_checked").blur(checkChecked);
		    function checkMail(){
//		    	alert(1);
		    	var mail=$("#bg_email");
		    	var mailC=mail.val();
		    	if (mailC=="") {
		    		mail.next().html("邮箱不能为空");
		    		return false;
		    	}
		    	var reg_Mail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		    	if(!reg_Mail.test(mailC)){
		    		mail.next().html("邮箱格式不正确");
		    		return false;
		    	}
		    	mail.next().hide();
		    	mail.next().next().show();
		    	return true;
		    	
		    }
		    function checkName(){
		    	var name1=$("#bg_name");
		    	var nameC=name1.val();
		    	if (nameC=="") {
		    		name1.next().html("昵称不能为空");
		    		return false;
		    	}
		    	var reg_Name=/^\w{4,12}$/;
		    	if (!reg_Name.test(nameC)) {
		    		name1.next().html("输入4-12位字符、英文、数字或者中文");
		    		return false;
		    	}
		    	name1.next().hide();
		    	name1.next().next().show();
		    	return true;
		    	
		    }
		    function checkPwd(){
		    	var pwd=$("#bg_pwd");		    	
		    	 pwdC=pwd.val();
		    	if (pwdC=="") {
		    		pwd.next().html("密码不能为空");
		    		
		    		return false;
		    	}
		    	var reg_pwd=/^\w{6,16}$/;
		    	if (!reg_pwd.test(pwdC)) {
		    		pwd.next().html("输入6-16位字符或数字、字母,区分大小写");
		    		
		    		return false;
		    	}

                pwd.next().hide();
                pwd.next().next().show();
		    	return true;
		    }
		    function checkRpwd(){
		    	var rpwd=$("#bg_rpwd");
		    	var rpwdC=rpwd.val();
		    	if (!rpwdC==pwdC) {
		    		rpwd.next().html("两次输入密码不一致,请重新填写");
		    		return false;
		    	}

            
		    	return true;
		    }
		    function checkChecked(){
		    	var check=$("#bg_checked");
		    	var checkC=check.val();
		    	if(checkC==""){
		    		check.next().next().html("验证码不能为空");		    		
		    		return false;
		    	}
		    	check.next().next().hide();
		    	check.next().next().next().show();
		    	return true;
		    }
		    
		    
			});
		</script>
	</head>
	<body>		
		<div id="body">		
		<div id="d_form">
		<div id="d_left">	
		<form id="f_register" method="post" action="#">
		<p><input type="text" id="bg_email" placeholder="请输入你的常用邮箱"/><span></span><img src="../../jquery-validation-1.14.0/demo/images/checked.gif" style="display: none;"/></p>	
		<p><input type="text" id="bg_name" placeholder="请输入昵称"/><span></span><img src="../../jquery-validation-1.14.0/demo/images/checked.gif" style="display: none;"/></p>	
		<p><input type="text" id="bg_pwd" placeholder="请输入密码"/><span></span><img src="../../jquery-validation-1.14.0/demo/images/checked.gif" style="display: none;"/></p>	
		<p><input type="text" id="bg_rpwd" placeholder="请再次输入密码"/><span></span></p>	
		<p><input type="text" id="bg_checked" placeholder="请输入右侧验证码"/><img src="../../img/59a11fa7365d1.png" id="img_checked"><span></span><img src="../../jquery-validation-1.14.0/demo/images/checked.gif" style="display: none;"/></p>	
		<p><input type="checkbox" checked="checked" />
		<label id="l_agree">同意<a href="#">用户服务条款</a></label></p>
		<p><input type="submit" value="注册" id="btn_register"/></p>
		</form>
		</div>
		<div id="d_right">
		<form method="post" action="post">
		<input type="button" value="已有账号，马上登录" id="btn_b"/>
		</form>	
		</div>
		</div>	
		
		
		
		
		</div>
	</body>
</html>
